import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Swiper, NavBar } from 'react-vant'
const Index = () => {

  // 获取查询参数 ? 
  // const [searchParam] = useSearchParams();
  // const id = searchParam.get('id');
  // 获取动态路由参数 :id
  const params = useParams();
  const id = params.id;
  // 使用useNavigate函数获取导航函数
  const navigate = useNavigate()
  const [v, setV] = useState({});
  const [loading, setLoading] = useState(true)

  const getDetail = async () => {
    // 发起请求获取详情
    const resp = await axios.get('/api/tabs/detail', { params: { id } });
    const { code, data } = resp.data
    if (code === 200) {
      // 设置v的值为响应数据
      setV(resp.data.data);
      // 设置加载状态为false

    }
    else
      console.log('获取详情失败')

    setLoading(false)
  }


  useEffect(() => {
    getDetail()
  }, [])

  if (loading) return '数据加载中...'

  return (
    <div>
      <NavBar title="详情" onClickLeft={() => navigate(-1)}></NavBar>
      <dl>
        <dt>
          {/* <img src={v.image} alt="" width='100%' height={200}/> */}
          <Swiper>
            {
              v.images.map((v, i) => {
                return <Swiper.Item key={i}>
                  <img src={v} alt="" width={'100%'} height={200} />
                </Swiper.Item>
              })
            }
          </Swiper>
        </dt>
        <dd>
          <h3>{v.title}-{v.type}</h3>
          <p>观众评分: {v.score}</p>
          <p>主演: {v.names.map(v => v.name).join(',')}</p>
          <p>今天{v.cinemaCount}家影院放映了{v.count}场</p>
        </dd>
      </dl>
    </div>
  )
}

export default Index